<template>
  <div class="broadcast-box">
    <div class="broadcast">
      <div class="broadcast-container" :style="{ left: leftNum + 'px' }">
        <div class="broadcast-item" ref="bordercast">
          <span class="broadcast-text">欢迎乘坐深圳地铁14号线</span>
          <span>Welcome To Shenzhen Metro Line 14</span>
        </div>
        <div class="broadcast-item">
          <span class="broadcast-text">
            今天天气 {{ weatherInfo.weather }}，温度{{
              weatherInfo.temperture
            }}，空气湿度{{ weatherInfo.humidity }}
          </span>
          <span>
            {{ weatherInfo.weather }}，
            {{ weatherInfo.temperture }}，Humidity:{{ weatherInfo.humidity }}
          </span>
        </div>
        <div class="broadcast-item">
          <span class="broadcast-text">欢迎乘坐深圳地铁14号线</span>
          <span>Welcome To Shenzhen Metro Line 14</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'wenzi',
  props: {
    weatherInfo: Object
  },
  data() {
    return {
      leftNum: 0
    };
  },
  mounted() {
    this.scrollScreen();
  },
  methods: {
    scrollScreen() {
      let boxWidth = this.$refs.bordercast.clientWidth * 2;
      console.log(boxWidth);
      setInterval(() => {
        if (this.leftNum <= -boxWidth) {
          this.leftNum = 0;
        } else {
          this.leftNum = this.leftNum - 2;
        }
      }, 40);
    }
  }
};
</script>

<style scoped lang="scss">
.broadcast-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.broadcast {
  color: #fff;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
}
.broadcast-container {
  position: absolute;
  width: calc(70vw * 3);
  text-align: left;
}
.broadcast-item {
  display: inline-block;
  width: 70vw;
}
.broadcast-text {
  margin-right: 40px;
}
</style>
